<?php 
   $this->load->view('includes/header');
   $this->load->view('includes/nav');
   
?>
<script src="<?php echo base_url();?>public/js/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="<?php echo base_url();?>public/js/libs/mustache.js"></script>
<script src="<?php echo base_url();?>public/js/lp_spots.js" type="text/javascript"></script>
<script src="<?php echo base_url();?>public/js/fileuploader.js" type="text/javascript"></script>
<!--<script>
    function initialize() {
      var myLatlng = new google.maps.LatLng(-34.397, 150.644);
      var myOptions = {
        zoom: 8,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
    }

    function loadScript() {
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
      document.body.appendChild(script);
    }

    window.onload = loadScript;


</script>-->
<div class="spotInfoHeader">

    <div>
        <ul>
            <li><?php  echo $spot[0]['continent']; ?></li>
            <li><?php  echo $spot[0]['country']; ?></li>
            <li><?php  echo $spot[0]['region']; ?></li>
            <li><?php  echo $spot[0]['name']; ?></li>
        </ul>
    <span class="toggle_spot"></span>
    <span id="addSpot" class="button">Add Spot</span>
    </div>
</div>
<section id="LeapMainWrapper" class="spotMainWrapper">
    <section id="LeapContentWrapper">
      <div id="sp-1">
        <div id="spotsWrapper">
            <div id="lp-continents" class="" >
                <ul id="continents" class="msw-locationOptionList">
                    <?php
                    foreach ($this->lang->line('contients') as $value) {
                        echo '<li class="leap_location" id="'.$value.'">'.$value.'</li>';
                    }
                    ?>
                </ul>
            </div>
            <div id="lp-countries" class="">
                <span class="triange_region"></span>
                <span class="up_a"></span>
                <span class="scrollWrapper">
                <?php
                    foreach ($this->lang->line('contients') as $value) {
                        echo '<ul class="countries" id="region_'.str_replace(' ', '_', $value).'" class="msw-locationOptionList" >';
                        
                        foreach ($this->lang->line(str_replace(' ', '_', $value)) as $countrie) {
                            echo '<li class="leap_location" region="'.$countrie.'">'.$countrie.'</li> ';
                        }
                        echo '</ul>';
                    }
                    ?>
                </span>
                <span class="down_a"></span>
            </div>
            <div id="lp-regions" class="">
                <span class="triange_region"></span>
                <span class="scrollWrapper">
                <?php
                    foreach ($this->lang->line('contients') as $value) {

                    foreach ($this->lang->line(str_replace(' ', '_', $value)) as $countrie) {
                        echo '<ul class="country_' . str_replace(' ', '_', $countrie) . ' regions"  >';
                        foreach ($this->lang->line(str_replace(' ', '_', $countrie)) as $region) {
                            echo '<li class="leap_location" region="' . $region . '">' . $region . '</li> ';
                        }
                        echo '</ul>';
                    }
                    }
                ?>
                </span>
            </div>
            <div id="lp-spots">
                <span class="triange_region"></span>
                <span class="scrollWrapper">
                    <ul class="spots">

                    </ul>
                </span>
            </div>
        </div>
       </div>
        <div class="spotName">
            <h2><?php  echo $spot[0]['name']; ?></h2>
        </div>
        <div class="spotsContentWrapper">
            <div class="spotGallery">
                <?php  foreach($spot[0]['thumb_images'] as $key => $value) {
                    if($key === 0){
                    ?>
                    <span><img src="<?php echo $value; ?>" width="209" height="154" /></span>
                    <?php  }else{ ?>
                    <span><img src="<?php echo $value; ?>" width="100" height="100" /></span>
                <?php  } } ?>

            </div>
            <div class="spotsInfos">
            <table>
                <tr><td  width="20%"><p>Difficulty</p></td> <td class="experience"><?php  echo $spot[0]['difficulty']; ?></td></tr>
                <tr><td  width="20%"><p>Creativity</p></td><td class="distance"><?php  echo $spot[0]['creativity']; ?></td></tr>
                <tr><td  width="20%"><p>Address</p></td><td class="address"><?php  echo $spot[0]['address']; ?></td></tr>
                <tr><td  width="20%"><p>Special access</p></td><td class="access"><?php  echo $spot[0]['access']; ?></td></tr>
                <tr><td  width="20%"><p>Additional information</p></td><td class="infos"><?php  echo $spot[0]['description']; ?></td></tr>
            </table>
                
            </div>
<!--             <div id="googleMap"></div>-->
        </div>
    </section>
    <section class="checkedUsersWrapper">
        <div class="checkedUserHeader">People now There</div>
        <div class="checkedUser">
            <span class="pictureWrapper"><img src="https://s3.amazonaws.com/leap_s3/904722955/562032_10150697403816890_250890218_n_thumb.jpg" width="30" /></span>
            <p>Josef Slimane</p>
        </div>
        <div class="checkedUser">
            <span class="pictureWrapper"><img src="https://s3.amazonaws.com/leap_s3/567901889/joey_thumb.jpeg" width="30" /></span>
            <p>Joe Slimane</p>
        </div>
        <div class="checkedUser">
            <span class="pictureWrapper"><img src="https://graph.facebook.com/100001513197746/picture?type=large" width="30" /></span>
            <p>Marcela meza</p>
        </div>
    </section>
</section>
<!-- Add Spots Mustache Overlay -->
<script id="addSpot_template" type="text/template">
<div class="upload_overlay" id="overlay_upload_spot">
    <div class="overlay_head">
        Add Spot
        <span class="close_overlay"></span>
    </div>
    <div class="overlay_content">
        <div class="overlay_content_side">
            <ul id="spots_helper">
                <li class="selected">Spot Infos</li>
                <li>Pictures</li>
            </ul>
        </div>
        <div class="overlay_content_main">
            <div class="addSpotWrapper">
                <div >
                    <label>Name</label>
                    <input type="text" name="name" id="name"/>
                    <label>Difficulty</label>
                    <div class="lpDropdown" id="dropdown-diff">
                        <a href="#" id="variable" class="lpDropdown-selected">Variable</a>
                        <ul class="lpOptions">
                            <li><a href="#" rel="1">Variable</a></li>
                            <li><a href="#" rel="2">Beginners</a></li>
                            <li><a href="#" rel="3">Advanced</a></li>
                            <li><a href="#" rel="4">Professional</a></li>
                        </ul>
                    </div>
                    <label>Creativity</label>
                    <div class="lpDropdown" id="dropdown-creativity">
                        <a href="#" id="Normal" class="lpDropdown-selected">Normal</a>
                        <ul class="lpOptions">
                            <li><a href="#" rel="1">Normal</a></li>
                            <li><a href="#" rel="2">Creative</a></li>
                            <li><a href="#" rel="3">Lot of staff</a></li>
                            <li><a href="#" rel="4">Parkour Heaven</a></li>
                        </ul>
                    </div>
                    <label>Address</label>
                    <input type="text" name="address" id="address"/>
                    <label>Access</label>
                    <div class="lpDropdown" id="dropdown-access">
                        <a href="#" id="public" class="lpDropdown-selected">Public</a>
                        <ul class="lpOptions">
                            <li><a href="#" rel="1">Public</a></li>
                            <li><a href="#" rel="2">Difficult</a></li>
                            <li><a href="#" rel="3">Private</a></li>
                            <li><a href="#" rel="4">Costs</a></li>
                        </ul>
                    </div>
                    <label>Additional Information</label>
                    <textarea id="infos"></textarea>
                </div>  
                <span id="addspot" class="button">Add</span>
            </div>
            <div class="locationWrapper">
                <div class="lpDropdown" id="dropdown-continent">
                        <a href="#" id="not-selected" class="lpDropdown-selected">Select Continent</a>
                        <ul class="lpOptions">
                            <?php foreach ($this->lang->line('contients') as $value) { ?>
                                 <li><a href="#" rel="1"><?php echo $value; ?></a></li>
                           <?php } ?>
                        </ul>
                </div>
                <div class="lpDropdown" id="dropdown-countries">
                        <a href="#" id="not-selected" class="lpDropdown-selected">Select Country</a>
                        <ul class="lpOptions not-selected" >
                            <?php foreach ($this->lang->line('contients') as $value) {
                        foreach ($this->lang->line(str_replace(' ', '_', $value)) as $countrie) { ?>
                            <li class="<?php echo str_replace(" ", "_", strtolower($value)); ?>"><a href="#" rel="1"><?php echo $countrie; ?></a></li>
                           <?php }} ?>
                        </ul>
                </div>
                <div class="lpDropdown" id="dropdown-region">
                        <a href="#" id="not-selected" class="lpDropdown-selected">Select a Region</a>

                            <ul class="lpOptions">
                           
                            </ul>
                </div>
            </div>
            <div class="spotPictureWrapper">
                <div class="spotTerms">
                    <p>Thanks for offering to upload a photo to leap2pk.com.<br>
                        You need to read our <a href="/spots/termsy">terms and conditions</a> quickly before you post.
                        
                        The photo has to be yours and of the area related for the spot you're submitting.
    
                        We're happy to accept photos of nearby areas against our main spots but think carefully about uploading or naming low profile spots.
                    </p>
                    <span id="termsAccept" class="button"><a href="#">Accept</a></span>
                </div>


                <div id="file-uploader">		
                    <noscript>			
                    <p>Please enable JavaScript to use file uploader.</p>
                    <!-- or put a simple form for upload here -->
                    </noscript>         
                </div>
            </div>
        </div>
    </div>

</div>
</script>
    <script>     
        $.lp.spots.init();
            
    </script> 
<div class="overlay_bg"></div>
<?php
   $this->load->view('includes/footer');
?>